<template>
	<s-layout title="我的好友" :bgStyle="{
		color:'#F6F6F6'
	}">
	<!-- 搜索 -->
	<view class="search-box ss-flex justify-center align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
		<view class="search ss-flex justify-start align-center ss-p-x-20">
			<uni-icons type="search" size="30" color="#767676"></uni-icons>
			<input class="ss-m-l-15" type="text" placeholder="搜索我的好友"
				placeholder-style="font-size:30rpx;color:#767676;" confirm-type="search" @confirm="confirm">
		</view>
	</view>
	<view style="width: 100%;height: 120rpx;"></view>
	<view class="item-box" @click="newFriend">
		<view class="item ss-flex justify-start align-center ss-font-32">
			<image class="item-image"
				src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/im/new_friend.png"></image>
			<view>新的好友</view>
		</view>
	</view>
	<view class="item-box" @click="myGroup">
		<view class="item ss-flex justify-start align-center ss-font-32">
			<image class="item-image" src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/im/my_group.png">
			</image>
			<view>我的群聊</view>
		</view>
	</view>
	<view class="tips ss-font-28">我的好友</view>
	<!-- 好友列表 -->
	<view class="item-box" v-for="(item,index) in state.list" :key="index" @click="handleCall(item)">
		<view class="item ss-flex justify-start align-center ss-font-32">
			<image class="item-image" :src="cdn(item.profile.avatar)" mode="aspectFill">
			</image>
			<view>{{item.profile.nick}}</view>
		</view>
	</view>
	<s-empty v-if="state.list.length === 0"
		icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据">
	</s-empty>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {cdn,udid} from '@/im/config/index.js'
	import $store from '@/im/store/im';


	const state = reactive({
		list: []
	})
	
	onShow(()=>{
		getFriendList()
	})


	const myGroup = () => {
		uni.navigateTo({
			url: '/im/pages/groups'
		})
	}

	const newFriend = () => {
		uni.navigateTo({
			url: '/im/pages/newFriend'
		})
	}


	const confirm = (e) => {
		if (e.detail.value.length <= 0) {
			return
		}
		wx.$app.getFriendProfile({
			userIDList: [e.detail.value]
		}).then(imResponse => {
			if (imResponse.code === 0 && imResponse.data.friendList.length > 0) {
				state.list = imResponse.data.friendList
			} else {
				uni.showToast({
					title: '暂无此手机号好友~',
					icon: 'none',
				})
			}
		}).catch(e => {

		})
	}

	const getFriendList = () => {
		state.list = []
		wx.$app.getFriendList().then(imResponse => {
			if (imResponse.code === 0) {
				state.list = imResponse.data
			}
		})
	}

	const handleCall = (item) => {
		$store().getFriendInfo(`C2C${item.userID}`,'friend')
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.search-box {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
		position: fixed;
		left: 0;
		top: 0;
		z-index:999;

		.search {
			width: 706rpx;
			height: 70rpx;
			border-radius: 40rpx;
			background: #E2E2E2;
		}
	}

	.item-box {
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;

		.item {
			height: 130rpx;
			color: #3D3D3D;
			padding-left: 22rpx;
		}

		.item-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
	}

	.tips {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
		background-color: #EFEFEF;
	}
</style>